<template>
	<div class="app">
		<el-container>
			<el-header>
				<el-row type="flex" class="row-bg" justify="space-between">
					<el-col :span="6">
						<div class="bannerImg"><img src="../../public/icons8-home-48.png" /></div>
					</el-col>
					<el-col :span="6">
						<el-input v-model="input" placeholder="请输入内容" prefix-icon="el-icon-search" size="small"></el-input>
					</el-col>
					<el-col :span="6">
						<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" text-color="#9c9c9c" active-text-color="#409EFF">
							<el-menu-item index="1">首页</el-menu-item>
							<el-menu-item index="2">文章</el-menu-item>
							<el-menu-item index="3">发现</el-menu-item>
							<el-menu-item index="4">等着你来</el-menu-item>
						</el-menu>
					</el-col>
				</el-row>
			</el-header>
			<el-main>Main</el-main>
		</el-container>
	</div>
</template>

<script>
export default {
	name: 'App',
	data() {
		return {
			activeIndex2: '1',
			input:''
		};
	},
	methods: {
		handleSelect(key, keyPath) {
			console.log(key, keyPath);
		}
	}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .el-menu{
	  height: 0;
  }
</style>
